<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta name="author" content="Yb">
    <title>钢琴</title>
    <style>
        html,body{
            height: 100%;
        }
        body{
            /*径向渐变*/
            background-image: radial-gradient(circle,#555,#000);

        }
        section{
            width: 800px;
            height: 400px;
            margin: 200px auto;
            padding: 40px 20px 20px 20px;
            background-color: #333;
            border-radius: 20px;
            box-shadow: 0 0 30px #aaa;
            position: relative;
        }
        main{
            width: 100%;
            height: 100%;
            background-color: #fff;
            display: flex;
            justify-content: space-around;
        }
        main>div{
            width: 100%;
            /*均分空间*/
            flex-grow: 1;
            border-right: 3px solid #333;
        }
        main>div:last-of-type{
            border: none;
        }
        
        main>div:active{
            background-image: linear-gradient(#fff,#bbb);
        }
        .blackkey{
            margin: 0;
            padding: 0;
            width: 800px;
            height: 200px;
            position: absolute;
            top: 40px;
            right: 20px;
            text-align: right;
        }
        .blackkey>div{
            display: inline-block;
            width: 50px;
            height: 220px;
            margin-left: 31px;
            background-color: #000;
        }
        .blackkey>div:last-of-type{
            width: 25px;
        }
        .blackkey>div:nth-child(6){
            margin-left: 120px;
        }
        .blackkey>div:nth-child(3){
            margin-left: 120px;
        }

        .down{
            background-image: linear-gradient(#fff,#bbb);
        }
    </style>
</head>
<body>
    <section>
        <main>
            <div onmousedown="play(0)" class="keys "></div>
            <div onmousedown="play(1)" class="keys"></div>
            <div onmousedown="play(2)" class="keys"></div>
            <div onmousedown="play(3)" class="keys"></div>
            <div onmousedown="play(4)" class="keys"></div>
            <div onmousedown="play(5)" class="keys"></div>
            <div onmousedown="play(6)" class="keys"></div>
            <div onmousedown="play(7)" class="keys"></div>
            <div onmousedown="play(8)" class="keys"></div>
        </main>
        <div class="blackkey">
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
        </div>
        <!--audio-->
        <audio src="notes/1.oga"></audio>
        <audio src="notes/2.oga"></audio>
        <audio src="notes/3.oga"></audio>
        <audio src="notes/4.oga"></audio>
        <audio src="notes/5.oga"></audio>
        <audio src="notes/6.oga"></audio>
        <audio src="notes/7.oga"></audio>
        <audio src="notes/8.oga"></audio>
        <audio src="notes/9.oga"></audio>
    </section>
</body>
</html>
<script>
    // 获取所有类名为keys的div元素
    var divs = document.querySelectorAll('div[class=keys]');
    console.log(divs);

    // 获取audio标签
    var players = document.querySelectorAll('audio');

    function play(index){
        console.log(index);
        // 根据传递的索引值，找到对应的audio标签，然后开始播放声音
        var player = players[index];
        // load() 重新加载音频资源
        player.load();
        // play() 播放声音的方法
        player.play();
    }

    var code = 0;
    // 按键播放声音 数字键盘的[1~9]
    window.onkeydown = function(ev){
        console.log(ev);
        // 判断当前code的值不等于ev.keyCode的值得时候，进入判断语句，让code的值
        // 等于ev.keyCode的值，以防出现按下某个按键不松开出现声音断序的效果
        if(code != ev.keyCode){
            code = ev.keyCode;
            // 判断案件数字是[49~57]的时候进入判断语句
            if(code>=49 && code<=57){
                var index = code - 49;
                // 根据按键的数字，播放对应的声音
                play(index);
                divs[index].className = 'keys down';
            }
        }
    }
    window.onkeyup = function(){
        code = 0;
        // 松开键盘时，清空所有div的类名，以防下次按键不会出现渐变背景
        for(var i = 0; i < divs.length; i++){
            divs[i].className = 'keys';
        }
        
    }

</script>